<template>
    <div class="top">
        <div class="left">
            <span class="lbtn" @click="goHome">首页</span>
        </div>
        <div class="center">
            智慧旅游可视化数据展示平台
        </div>
        <div class="right">
            <span class="rbtn">统计报告</span>
            <span class="time">当前时间:2024年7月5日9:51</span>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const $router=useRouter()
const goHome=()=>{
    $router.push('/home')
}
</script>

<style scoped lang="scss">
.top{
    display:flex;
    height:40px;
    .left{
        flex:1;
        height:100%;
        background:url(../images/dataScreen-header-left-bg.png);
        .lbtn{
            width:135px;
            height:100%;
            float:right;
            cursor:pointer;
            background:url(../images/dataScreen-header-btn-bg-l.png);
            text-align:center;
            line-height:40px;
            color:#29fcff;
            font-size:20px;
        }
    }
    .center{
        flex:2;
        width:100%;
        height:74px;
        color:#29fcff;
        font-size:30px;
        text-align:center;
        line-height:74px;
        background:url(../images/dataScreen-header-center-bg.png);
        background-repeat:no-repeat;
        background-size:cover;
    }
    .right{
        flex:1;
        height:100%;
        color:#29fcff;
        background:url(../images/dataScreen-header-right-bg.png);
        .rbtn{
            width:135px;
            height:100%;
            float:left;
            background:url(../images/dataScreen-header-btn-bg-r.png);
            background-repeat:no-repeat;
            background-size:cover;
             text-align:center;
            line-height:40px;
            font-size:20px;
        }
        .time{
            float:right;
            font-size:20px;
            padding-right:40px;
            line-height:40px;
        }
    }
}
</style>